<template>
  <div ref="chart" class="main">
  </div>
</template>

<script>
// 引入echart核心模板
import * as echarts from 'echarts';

export default {
  data() {
    return {
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      //初始化
      let myChart = echarts.init(this.$refs.chart);

      //图表的配置项和数据
      const option = {

        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
          {
            data: [10, 22, 28, 23, 19],
            type: 'line',
            smooth: true
          }
        ]

      };
      //配置项和数据显示
      myChart.setOption(option);
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  height: 200px;
  width: 100%;
  margin-top: -47px;
}
</style>
